<template>
	<view>
		<view class="search">
			<uni-search-bar @confirm="search" placeholder="请输入姓名/手机号搜索" v-model="searchValue"></uni-search-bar>
		</view>
		<view style="height: 100upx;"></view>
		<view class="boxes" v-for="(i,index) in list" :key="index" @click="kaifang(i.id)">
			<view>患者姓名：{{i.name}}</view>
			<view v-if="i.sex==1">性别：男</view>
			<view v-else>性别：女</view>
			<view>年龄：{{i.age}}</view>
			<view>手机号：{{i.phone}}</view>
			<view>病历号：{{i.number}}</view>
			<view class="last">复诊开方</view>
		</view>
	</view>
</template>

<script>
	import {
		myusers
	} from '../../request/api.js'
	export default {
		data() {
			return {
				searchValue:'',
				// 上拉加载
				page: 1,
				pages: 0,
				list: []
			}
		},
		onLoad() {
			this.getList(1)
		},
		onReachBottom: function() {
			//触底的时候请求数据，即为上拉加载更多
			this.page++;
			if (this.page > this.pages) {
				uni.hideNavigationBarLoading();
				uni.showToast({
					title: '暂无更多数据',
					icon: 'none'
				})
			} else {
				this.getList(this.page);
			}
		},
		methods: {
			// 搜索
			search(res){
				this.searchValue = res.value;
				this.page = 1;
				this.pages = 0;
				this.list = [];
				this.getList(1)
			},
			// 去开方
			kaifang(id){
				uni.navigateTo({
					url:'/pages/guahao/kaifang?id='+id
				})
			},
			// 列表
			getList(page) {
				var that = this
				uni.showLoading({
					title: '加载中...'
				})
				myusers({
					page: page,
					listRows: 20,
					keys:this.searchValue
				}).then(res => {
					this.pages = res.totalPages;
					if (this.page == 1) {
						this.list = res.data;
						if (this.list.length === 0 || this.list.length === '0') {
							uni.showToast({
								icon: 'none',
								duration: 3000,
								title: '暂无数据'
							});
							return
						}
					} else {
						this.list = this.list.concat(res.data);
					}
					uni.hideLoading()
					uni.hideNavigationBarLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}
	.search{
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		background-color: #ffffff;
		padding: 0 30upx;
	}
	.boxes {
		background: #ffffff;
		margin: 20upx 0;
		padding: 20upx 30upx;
		line-height: 160%;
		position: relative;
		
		.last{
			color: #6996FE;
			font-size: 24upx;
			border: 1px solid #6996FE;
			border-radius: 26upx;
			padding: 10upx 30upx;
			width: 180upx;
			line-height: 120%;
			margin-top: 30upx;
			text-align: center;
			position: absolute;
			right: 35upx;
			top: 0upx;
		}
	}
</style>
